<template>
	<div class="box">
		<center>
			<h1>ALM</h1>
			<router-link to="/Any">Any</router-link>
			<br >
			<router-link to="/Main">Main</router-link>
			<br >
			<router-link to="/Login">Login</router-link>
			<hr />
			<p>导航守卫有n种，本dome为全局前置守卫，最常见，其他还有：</p>
			<table>
			    <thead>
					<th>方法名</th>
			        <th>描述</th>
			    </thead>
			    <tbody>
			        <tr v-for="(item, index) in rouBefore" :key="item.key" >
						<td>{{ item.fun }}</td>
						<td>{{ item.ab }}</td>
			        </tr>
			    </tbody>
			</table>
			<router-view></router-view>
		</center>
		
	</div>
</template>
<script>
	export default{
		data(){
			return{
				rouBefore:[
					{key:'beforeEach'       ,fun:'router.beforeEach'               ,ab:'全局前置守卫'},
					{key:'beforeResolve '   ,fun:'router.beforeResolve'            ,ab:'全局解析守卫'},
					{key:'afterEach'        ,fun:'router.afterEach,sendToAnalytics',ab:'全局后置钩子'},
					{key:'beforeEnter'      ,fun:'router.beforeEnter'              ,ab:'路由独享的守卫'},
					{key:'beforeRouteEnter' ,fun:'router.beforeRouteEnter'         ,ab:'组件内的守卫'},
				]
			}
		}
	}
</script>

<style scoped>
	.box{
		height: 800px;
		background-color: olive;
	}
	table{
		border:1px solid black;
	}
	th{
		border:1px solid black;
	}
	td{
		border:1px solid black;
	}
</style>